<template>
  <van-config-provider :theme-vars="theneVars">
    <van-row>
      <van-cell>
        <Swiper
            class="swiperBox"
            :slidesPerView=3.5
            :initialSlide=0
        >
          <SwiperSlide v-for="item in content">
            <div class="picture_box">
              <van-image width="100" height="80"   class="picture"/>
              <p class="picture_title van-ellipsis">2人得商品16人参与将</p>
            </div>
            <p class="title">45.88</p>
          </SwiperSlide>
        </Swiper>
      </van-cell>
    </van-row>
  </van-config-provider>
</template>
<script setup lang="ts">
import {Swiper,SwiperSlide} from 'swiper/vue'
import SwiperCore,{Pagination,Scrollbar} from 'swiper';

const theneVars = {
  gridItemTextColor:'black',
  gridItemTextFontSize:'14px'
}

const content = [
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
  {
    picture:'/src/assets/icon/1@2x.png',
    title:'两人团'
  },
]


</script>
<style scoped lang="scss">
.picture_box{
  border-radius: 10px;
  overflow: hidden;
  margin-right: 5px;
}
.picture_title{
  font: {
    size: .1rem;
  }
  color: white;
  background-color: #f8783c;
}
.picture{
  display: block;
}
.title{
  margin: 0;
  text-align: center;
  color: #ee9479;
}

</style>